<template>
  <div class="main">
    <div class="tab">
      <div
        :class="['tab-item', { active: !active }]"
        @click="openRouter('element')"
      >
        第一题
      </div>
      <div
        :class="['tab-item', { active: active }]"
        @click="openRouter('antDesign')"
      >
        第二题
      </div>
    </div>
    <transition name="fade" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  watch: {
    $route: {
      handler(to) {
        this.changeActive(to.name);
      },
      immediate: true,
    },
  },
  methods: {
    openRouter(name) {
      this.changeActive(name);
      this.$router.push({ name });
    },

    changeActive(name) {
      this.active = name == "element" ? 0 : 1;
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  padding: 10px 15px;
  height: 100vh;
  box-sizing: border-box;
  overflow: auto;
}

.tab {
  display: flex;
  align-items: flex-end;
  margin: 10px 0;

  &-item {
    margin-right: 10px;
    color: #666;
    font-size: 16px;
    cursor: pointer;
  }

  .active {
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }
}

.fade-enter-active {
  transition: opacity 0.3s;
}
.fade-enter {
  opacity: 0;
}
.fade-leave {
  opacity: 1;
}
.fade-leave-active {
  opacity: 0;
  transition: opacity 0.3s;
}
</style>